<template>
  <div>
    <div class="titlebox">
      <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
      <el-button type="danger" size="mini" @click="handleMulDel('more')">删除</el-button>
      <div>
        <el-form>
          <el-form-item label="输入ID查询：">
            <el-input v-model="id" placeholder="请输入ID"></el-input>
          </el-form-item>
        </el-form>
      </div>
         <el-button type="primary" size="mini" @click="search">查询</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
       v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="reviewer_name" label="核检人名"> </el-table-column>
      <el-table-column prop="openid" label="openid"> </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column prop="department" label="部门" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="job" label="职务" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="是否启用" prop="is_use" width="120">
        <template v-slot:default="scope">
          <el-switch
            :value="scope.row.is_use == 1 ? true : false"
            @change="changestatues(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
                 
          <el-button
            type="danger"
            size="mini"
            @click="handleMulDel('row', scope.row.id)"
            >删除</el-button
          >
               
          <el-button
            type="primary"
            size="mini"
            @click="amendbtn(scope.row, scope.row.id)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
       <!-- 分页start -->
    <div class="fy" v-if="tableData.length">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.page"
      :page-sizes="[5, 10, 15, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <!-- 分页 end -->
    <!-- 添加弹框start -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-form
        :model="addQuery"
        :rules="rules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="核检人名:" prop="reviewer_name">
          <el-input
            v-model="addQuery.reviewer_name"
            placeholder="请输入核检人名"
          ></el-input>
        </el-form-item>
        <el-form-item label="ID" prop="openid">
          <el-input
            type="openid"
            placeholder="请输入openid"
            v-model="addQuery.openid"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            type="mobile"
            placeholder="请确认手机号"
            v-model="addQuery.mobile"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门:" prop="department">
          <el-input
            placeholder="请输入部门"
            v-model="addQuery.department"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="job">
          <el-input placeholder="请输入职务" v-model="addQuery.job"></el-input>
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-switch v-model="addQuery.is_use" @change="changeitemformStatus">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加弹框end -->
    <!-- 修改弹框start -->
    <el-dialog
      title="修改"
      :visible.sync="dialogrevise"
      width="80%"
      :before-close="handleClose"
    >
      <el-form
        :model="addQuery"
        :rules="rules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="核检人名" prop="reviewer_name">
          <el-input
            type="核检人名"
            placeholder="请输入核检人名"
            v-model="addQuery.reviewer_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="ID" prop="openid">
          <el-input
            type="openid"
            placeholder="请输入openid"
            v-model="addQuery.openid"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            type="mobile"
            placeholder="请确认手机号"
            v-model="addQuery.mobile"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门:" prop="department">
          <el-input
            placeholder="请输入部门"
            v-model="addQuery.department"
          ></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="job">
          <el-input placeholder="请输入职务" v-model="addQuery.job"></el-input>
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-switch v-model="addQuery.is_use" @change="changeitemformStatus">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogrevise = false">取 消</el-button>
        <el-button type="primary" @click="amendData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改弹框end -->
  </div>
</template>

<script>
import { post, get } from "../uilt/http.js";
import { list1, add1, changestatus, del1, edit } from "../uilt/app.js";
export default {
  data() {
    return {
      loading:true,
      tableData: [],
      adid: "",
      page: 1,
      pageSize: 6,
      id: "",
      multipleSelection: [],
      dialogVisible: false,
      dialogrevise: false,
      addQuery: {
        reviewer_name: "",
        openid: "",
        mobile: "",
        department: "",
        job: "",
        is_use: false,
      },
      total:0,
      rules: {
        reviewer_name: [
          {
            required: true,
            message: "请输入核检人名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur",
          },
        ],
        openid: [
          {
            required: true,
            message: "请输入ID",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        department: [
          {
            required: true,
            message: "请输入部门",
            trigger: "blur",
          },
        ],
        job: [
          {
            required: true,
            message: "请输入职位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.onSearch();
  },
  methods: {
    async search() {
      // console.log(this.id);
      let res = await this.$http.get("/visit/reviewer/show", { id: this.id });
      // console.log(res);
      if (res.code == "00000") {
        this.tableData = [];
        this.tableData.push(res.data);
      }
    },
    //  渲染列表
    async onSearch() {
      let res = await get(list1,{page:this.page,pageSize:this.pageSize});
      // console.log(res);
      if (res.code == "00000") {
        this.tableData = res.data;
           this.loading = false;
         this.total = res.total;
      }
    },
    // 添加表单数据
    async addFormData() {
      let res = await post(add1, {
        reviewer_name: this.addQuery.reviewer_name,
        openid: this.addQuery.openid,
        mobile: this.addQuery.mobile,
        department: this.addQuery.department,
        job: this.addQuery.job,
        is_use: this.addQuery.is_use,
      });
      console.log(res);
      if (res.code == "00000") {
        this.$message.success("添加成功");
        this.onSearch();
        this.dialogVisible = false;
        this.addQuery = {};
      } else {
        this.$message.error("添加错误");
      }
    },
    // 批量删除
    handleMulDel(type, id) {
      if (type === "more") {
        if (this.multipleSelection.length === 0) {
          return this.$message.error("请勾选要删除的数据");
        }
        let arr = [];
        this.multipleSelection.forEach((item) => {
          arr.push(item.id);
        });
        id = arr;
      }
      //把批量删除的item_id 传给后台
      this.$confirm("此操作将永久删除这条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await get(del1, { id: id });
          if (res.code == "00000") {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.onSearch();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改适用状态
    async changestatues(row) {
      row.is_use = !row.is_use;
      let res = await post(changestatus, { id: row.id, is_use: row.is_use });
      console.log(res);
      if (res.code == "00000") {
        this.$message.success("修改状态成功");
        this.onSearch();
      } else {
        this.$message.error("修改状态失败");
      }
    },
    async amendData() {
      let res = await post(edit, {
        id: this.adid,
        formdata: {
          reviewer_name: this.addQuery.reviewer_name,
          openid: this.addQuery.openid,
          mobile: this.addQuery.mobile,
          department: this.addQuery.department,
          job: this.addQuery.job,
          is_use: this.addQuery.is_use,
        },
      });
      if (res.code == "00000") {
        this.$message.success("修改成功");
        this.onSearch();
        this.dialogrevise = false;
        this.addQuery = {};
      } else {
        this.$message.error("修改失败");
      }
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    amendbtn(row, id) {
      this.adid = id;
      this.addQuery = row;
      this.dialogrevise = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changeitemformStatus(e) {
      console.log(e);
    },
    changeitemformStatus(status) {
      // console.log(status)
      this.addQuery.is_use = status;
    },
      handleSizeChange(val) {
     this.pageSize =val;
     this.onSearch()
      },
      handleCurrentChange(val) {
        //  console.log(val)
      this.page = val;
      this.onSearch();
      }
  },
};
</script>

<style scoped>
.el-table{
    margin-top: 16px;
}
.btn{
    display: flex;
}
.titlebox{
  height: 30px;
  display: flex;
}
.titlebox .el-form-item{
  display: flex;
  margin-left: 30px;
}
.titlebox .el-form-item .el-input{
  width: 190px;
  height: 30px;
}
.titlebox .el-button{
  margin-left: 30px;
}
.fy{
  padding-top: 25px;
  text-align: center;
}
</style>